<template>
  <div class="container">
    <div class="app-container" v-loading="loading">
      <!-- 有数据则展示树形结构 -->
      <el-tree 
      v-if="depts.length > 0" 
      :data="depts" 
      :props="defaultProps" 
      default-expand-all
      :expand-on-click-node="false"
      :highlight-current="true"
      >
      <!-- 节点结构 -->
      <!-- 插槽只能作用在template标签中 -->
       <!-- v-slot:default 可以简写为 v-slot或者#default
       (默认插槽) -->
      <template #default="{data}">
        <el-row type="flex" 
        justify="space-between"
        style="width:100%;height:40px;"

      >
        <el-col>{{data.name}}</el-col>
        <el-col :span="4">

          <span class="tree-manager">{{data.managerName}}</span>
          <!-- $event 表示el-dropdown中的默认实参(可省)，也就是下面绑定的command的值 -->
         <el-dropdown @command="operateDept($event,data.id)">
           <!-- 显示区域内容 -->
           <span class="el-dropdown-link">
             操作<i class="el-icon-arrow-down el-icon--right"></i>
           </span>
           <!-- 下拉菜单选项 -->
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="add">
               添加子部门
             </el-dropdown-item>
             <el-dropdown-item command="edit">
               编辑部门
             </el-dropdown-item>
             <el-dropdown-item command="del">
               删除
             </el-dropdown-item>
    
           </el-dropdown-menu>
         </el-dropdown>
        </el-col>
      </el-row>
      </template>
      </el-tree>
       <!-- 无数据显示空状态(vue2中没有空状态组件) -->
        <!-- <div v-else class="empty-state">
        <i class="el-icon-document"></i>
        <p>暂无数据</p>
        </div> -->

    </div>
    <!-- 放置弹层组件 -->
    <!-- vue2中使用sync修饰符实现父子组件数据双向绑定,表示会接受子组件的事件,并将子组件的值传给父组件的showDialog-->
    <!-- ref 可以获取dom实例对象，在vue2中也可以获取组件实例（包括自定义组件） -->
    <AddDept 
    ref="AddDept"
    :showDialog.sync="showDialog" :currentNodeId="currentNodeId"
    :showTitle="showTitle"
    @updateDepartment="getDepartments()"
    ></AddDept>

  </div>
</template>
<script>
import {getDepartment,deleteDepartment} from '@/api/department'
import {transListToTreeData,processDepartmentData} from '@/utils'
import AddDept from './components/AddDept.vue'
import {Message,MessageBox} from 'element-ui'
export default {
  name: 'Department',
  components:{
    AddDept
  },
  data() {
    return {
      currentNodeId:-1,//存储点击部门的id
      depts:[],//数据属性初始化
      loading:false,//控制加载状态
      defaultProps:{
        // 注意：tree组件中只有label和children这两个属性是必须的,它是tree组件内部规定的，如果在数据中还有其他字段名，就表明该数据是自定义的不必写入其中,比如上面的managerName
        label:'name',//要显示的字段的名字(以接口为主)
        children:'children',//读取子节点字段名
      },
      showDialog:false,//控制弹层显示和隐藏
      showTitle:''//不同场景下的标题
    }
  },
  created(){
    this.getDepartments()//调用并获取组织架构数据

  },
  methods:{
    async getDepartments(){
      this.loading=true//数据加载完成前打开加载框
      const res=await getDepartment()
      /*由于前端渲染需要修改后端传过来的数据，所以需要对数据进行处理*/
      // 将res深拷贝一份，并赋值给resList
      //对返回的数据进行切片处理，并赋值
      // console.log(res);
      const resList=processDepartmentData(res)
      // let resList=JSON.parse(JSON.stringify(res))
      // // 将res数组中的前两个元素单独放在一个新数组res1中
      // const res1=resList.slice(0,2)
      // // console.log(res1);
      //  // 将res数组中的剩余元素单独放在一个新数组res2中
      // const res2=resList.slice(2,resList.length)
      // // 去掉res2中的managerName字段中的值的前两个字符并返回新数组
      // res2.forEach(item=>{
      //   item.managerName=item.managerName.slice(2)
      // })
      // // console.log(res2);
      // // 将res1和res2合并,重新赋值给resList
      // resList=[...res1,...res2]
      // console.log(resList);
      // 将resList转换为树形结构数据,并赋值给数据属性depts，方便前端渲染
      this.depts=transListToTreeData(resList,0)
      this.loading=false//数据加载完成后关闭加载框
      // console.log(this.depts);
    },
    // 操作部门方法
    operateDept(type,id){
      console.log(type,id);
      if(type==='add'){
        /*添加子部门*/
        this.showDialog=true//显示弹层
        this.currentNodeId=id//存储点击的部门id
        this.showTitle='新增部门'
      }else if(type==='edit'){
        /*编辑部门*/
        this.showDialog=true//显示弹层
        this.currentNodeId=id//存储点击的部门id
        this.showTitle='编辑部门'
        // 在子组件获取数据，父组件调用子组件的方法来获取
        // 注意：由于props是异步，所以需要等props更新完成才能有最新的id，不然就是null，拿不到数据，可以将下面代码包裹在$nextTick()中，这样就是等props更新完再执行后面的逻辑
        this.$nextTick(()=>{
          // 将同步方法包裹在其中，方便与异步方法执行正确的逻辑
           this.$refs.AddDept.getDepartmentDetail()
        })
       

      }else{
        /*删除部门*/
       MessageBox.confirm('确定要删除该部门吗', '温馨提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
        }).then(async() => {
          // 点击确定调用删除接口
          await deleteDepartment(id)
          // 提示用户
          Message.success('删除部门成功')
          // 再次调用获取数据的方法，不需要手动刷新了
          this.getDepartments()

        })
      }
      
    }
  }
}
</script>

<style scoped>
.empty-state {
  text-align: center;
  color: #999;
  padding: 40px 0;
}
.empty-state i {
  font-size: 60px;
  margin-bottom: 10px;
}
.empty-state p {
  margin: 0;
  font-size: 16px;
}
.app-container {
  padding: 30px 140px;
  font-size: 14px;
}
.tree-manager {
  width: 50px;
  display: inline-block;
  margin: 10px;
}

</style>
